import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
// 导入三个子模块
import app from "./modules/app";
import settings from "./modules/settings";
import user from "./modules/user";
import route from "./modules/route";

import createPersisitedState from "vuex-persistedstate";
Vue.use(Vuex);

const store = new Vuex.Store({
  // 注册三个子模块
  modules: {
    app,
    settings,
    user,
    route,
  },
  // getters是state的快捷方式
  getters,
  // 使用
  plugins: [
    createPersisitedState({
      // 本地储存键名
      key: "hresass-23",
      // 那些模块需要数据持久化
      //插件的好处
      // 1、自动吧vuex中的数据同步到localstorage中
      // 2、当我们刷新页面的时候自动吧localstorage的数据赋值给vuex中的数据
      // 3、每当vuex中的数据发生变化的时候  ，也会自动把最新的vuex数据同步到localstorage
      // 数据的使用方法
      //  1、代码中  我们都是从vuex中做数据的增删改查（只用vuex中的数据）
      // 2、localstorage只负责刷新数据部丢失的任务

      paths: ["app", "settings"],
    }),
  ],
});

export default store;

// token为什么同时同vuex和本地存储共同管理
// 存储在vuex中的数据的优缺点
// 优点
// 1、响应式
// 2、读写数据快
// 缺点
// 数据不能持久化 刷新会丢失
// 而存储的优缺点正好与之相反
// 优点  刷新不丢失
// 缺点  非响应式     读写速度慢
// 双方互补
